<template>
  <BasicModal @register="registerModal" :title="title" :width="800" @ok="onSubmit">
    <div v-if="!isUpdate" class="deviceTypeBox">
      <div class="ant-col ant-form-item-label ant-form-item-label-left" style="width: 100px;"><label for="form_item_k2"
          class="ant-form-item-required" title="设备类型">设备类型</label></div>
      <a-select v-model:value="deviceTyp" :options="areas" @change="typeChange" />
    </div>
    <BasicForm @register="registerForm" :labelAlign="'left'" :wrapperCol="{ span: 20 }" :actionColOptions="{ span: 24 }"
      :labelWidth="100">
      <!-- <template #k3="{ model, field }">
        <div class="456" style="display: flex; flex:1;">
          <a-select v-model:value="model[field]" :options="areas" />
        </div>
      </template> -->
    </BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicModal, useModalInner } from '/src/components/Modal';
import { BasicForm, useForm } from '/@/components/Form';
import { UserList, deviceApi } from './data.api'

let model = {}
let isUpdate = ref<boolean>(false);
let title = computed<string>(() => (isUpdate.value ? '编辑设备' : '新增设备'));
// let responsePerson = ref();
// async function getdata() {
//   const res = await UserList()
//   responsePerson = res.records
//   console.log(responsePerson, 'responsePerson')
// }
// getdata()
const emits = defineEmits(['success']);
const areas = [
  {
    value: '1',
    label: '无人机',
  },
  {
    value: '2',
    label: '机场',
  },
  {
    value: '3',
    label: '摄像头',
  },
]
let deviceTyp = ref<string>('1');
let schemas = ref([
  {
    label: '旋翼类型',
    field: 'k1',
    component: 'Select',
    required: true,
    componentProps: {
      options: [
        {
          label: '多旋翼',
          value: '1',
        },
        {
          label: '固定翼',
          value: '2',
        },
        {
          label: '直升机',
          value: '3',
        },
        {
          label: '其他',
          value: '4',
        }
      ],
    },
    // dynamicDisabled: () => {

    //   return isUpdate.value
    // },
    ifShow: () => {
      return (deviceTyp.value == '1' || deviceTyp.value == '2') && !isUpdate.value ? true : false
    }
  },
  {
    label: '无人机分类',
    field: 'k2',
    component: 'Select',
    required: true,
    componentProps: {
      options: [
        {
          label: '多旋翼',
          value: '1',
        },
        {
          label: '固定翼',
          value: '2',
        }
      ],
    },
    ifShow: () => {
      return (deviceTyp.value == '1' || deviceTyp.value == '2') && !isUpdate.value ? true : false
    }
  },
  {
    label: '品牌',
    field: 'k3',
    component: 'Select',
    required: true,
    componentProps: {
      options: [
        {
          label: '多旋翼',
          value: '1',
        },
        {
          label: '固定翼',
          value: '2',
        }
      ],
    },
    ifShow: () => {
      return (deviceTyp.value == '1' || deviceTyp.value == '2') && !isUpdate.value ? true : false
    }
  },
  {
    label: '型号',
    field: 'deviceModel',
    component: 'Select',
    required: true,
    componentProps: {
      options: [
        {
          label: '多旋翼',
          value: '1',
        },
        {
          label: '固定翼',
          value: '2',
        }
      ],
    },
    ifShow: () => {
      return (deviceTyp.value == '1' || deviceTyp.value == '2') && !isUpdate.value ? true : false
    }
  },
  {
    label: '序列号',
    field: 'k5',
    component: 'Input',
    required: true,
    ifShow: () => {
      return (deviceTyp.value == '1' || deviceTyp.value == '2') && !isUpdate.value ? true : false
    }
  },
  {
    label: '名称',
    field: 'deviceName',
    component: 'Input',
    required: true,
    ifShow: () => {
      return deviceTyp.value == '1' || deviceTyp.value == '2' || isUpdate.value ? true : false
    }
  },
  {
    label: '责任人',
    field: 'userId',
    component: 'ApiSelect',
    required: true,
    ifShow: () => {
      return deviceTyp.value == '1' || deviceTyp.value == '2' || isUpdate.value ? true : false
    },
    componentProps: {
      api: UserList,
      resultField: 'records', //指定从 API 响应中提取选项列表的字段名称。
      labelField: 'realname', //指定用于显示在下拉菜单中的选项文本的字段名称。
      valueField: 'id',
      // options: responsePerson,
      // fieldNames: { label: 'realname', value: 'id', options: 'options' },
    },
    //   api: optionsListApi：指定一个远程 API，该 API 用于获取选项列表。你需要在其他地方定义 optionsListApi 这个 API。
    //   params: { id: 1 }：指定在请求 API 时发送的参数，这里将发送一个参数 id 等于 1。
    //   resultField: 'list'：指定从 API 响应中提取选项列表的字段名称。
    //   labelField: 'name'：指定用于显示在下拉菜单中的选项文本的字段名称。
    //   valueField: 'id'：指定选项的值字段，通常用于提交表单时的值。
    //   immediate: false：设置为 false，表示不会在页面加载时立即请求选项列表，只有在用户选择该字段时才会触发请求。
    //   onChange: (e) => {...}：当用户选择了一个选项时触发的回调函数，这里会打印所选的选项。
    // onOptionsChange: (options) => {...}：在请求选项列表后触发的回调函数，这里会打印获取到的选项列表。


  },
  {
    label: '联系方式',
    field: 'contactPhone',
    component: 'Input',
    required: true,
    ifShow: () => {
      return (deviceTyp.value == '1' || deviceTyp.value == '2') && !isUpdate.value ? true : false
    }
  },
  {
    label: '名称',
    field: 'contactPhone',
    component: 'Input',
    required: true,
    ifShow: () => {
      return deviceTyp.value == '3' && !isUpdate.value ? true : false
    }
  },
  {
    label: '品牌',
    field: 'pp',
    component: 'Select',
    required: true,
    componentProps: {
      options: [
        {
          label: '海康威视',
          value: '1',
        },
        {
          label: '华平',
          value: '2',
        }
      ],
    },
    ifShow: () => {
      return deviceTyp.value == '3' && !isUpdate.value ? true : false
    }
  },
  {
    label: '型号',
    field: 'xh',
    component: 'Input',
    required: true,
    ifShow: () => {
      return deviceTyp.value == '3' && !isUpdate.value ? true : false
    }
  },
  {
    label: '安装位置',
    field: 'wzwz',
    component: 'Input',
    required: true,
    ifShow: () => {
      return deviceTyp.value == '3' && !isUpdate.value ? true : false
    }
  },
])
const [registerForm, { validate, validateFields, resetFields, setFieldsValue }] = useForm({
  // schemas: deviceTyp.value == '1' ? schemas : schemas2,
  schemas: schemas,
  showActionButtonGroup: false,
  rowProps: { gutter: 24, justify: 'center', align: 'middle' },
  baseColProps: { span: 12 },
  baseRowStyle: { width: '100%' },
})
const [registerModal, { closeModal }] = useModalInner(async (data) => {
  isUpdate.value = data.isUpdate;
  model = data.record;
  if (isUpdate.value) {
    // model = data.record
    await setFieldsValue(data.record)
  } else {
    await resetFields()
  }
})

function typeChange() {
  resetFields()
}

async function onSubmit() {
  const value = await validate()
  console.log('value', value)
  // 表单验证
  if (isUpdate.value) {
    //编辑
    await deviceApi.edit({ deviceName: value.deviceName, userId: value.userId, id: model.id, deviceType: model.deviceType })
    // console.log('编辑校验成功',value,model)
  } else {
    //新增
    // await validateFields
    console.log('新增校验成功', value)
  }
  closeModal();
  emits('success')
}
</script>
<style scoped>
.deviceTypeBox {
  padding-bottom: 15px;
}
</style>
